<template>
<!--pages/company/company.ttml-->
<view class="content">
   <view class="hr"></view>
   <view class="item">
      <text>名字：</text>
      <input type="text" @input="name" placeholder="请输入你的名字" placeholder-class="holder" bingblur="accountblur"></input>
   </view>
<view class="item">
  <text>性别：</text>
  <picker class="picker" @change="bindGenderChange" :value="gender" :range="gender">
    <view class="picker">
      {{gender[objectIndex]}}
    </view>
  </picker>
</view>
   <view class="item">
    <text>生日：</text>
    <picker class="picker" mode="date" :value="birthday" start="1997-09-01" end="2023-09-01" @change="bindDateChange" fields="day">
      <view class="picker">
         {{birthday}}
      </view>
    </picker>
   </view>
  <view class="item">
   <text>民族：</text>
    <picker class="picker" :value="nationIndex" :range="nation" @change="bindNationChange" @cancel="bindPickerCancel">
      <view class="picker">
        {{nation[nationIndex]}}
      </view>
    </picker>
  </view>
  <view class="item" v-if="isShow">
   <text>所属工种：</text>
    <picker class="picker" :value="WorkTypeIndex" :range="workType" @change="bindWorkTypeChange" @cancel="bindPickerCancel">
      <view class="picker">
        {{workType[WorkTypeIndex]}}
      </view>
    </picker>
  </view>
   <view class="item">
    <text>所在地区：</text>
     <!-- <input type="text" bindinput="area" placeholder="所在地区" placeholder-class="holder" /> -->
     <cmap @getLocal="area"></cmap>
   </view>

   <view class="item">
    <text>手机号：</text>
     <input type="number" @input="phone" placeholder="请输入手机号" placeholder-class="holder"></input>
   </view>
   <view class="item">
      <text>自我介绍：</text>
      <view class="cell__bd">
        <!-- 多行输入框 -->
        <textarea class="weui-textarea" placeholder="请输入自我介绍正文内容。" maxlength="500" placeholder-style="color:#b3b3b3;font-size:14px;" style="height: 12rem" @input="handleContentInput"></textarea>
        <!-- 正文输入字数统计 -->
        <view class="weui-textarea-counter">{{contentCount}}/500</view>
      </view>
   </view>
    <button class="btn" :disabled="disabled" type="primary" form-type="submit" @tap="commit">注册</button>
</view>
</template>

<script>
// pages/ucenter/uinfo/uinfo.js
let app = getApp();
import cmap from "../../../components/cmap/cmap";

export default {
  data() {
    return {
      birthday: "",
      nation: [],
      workType: [],
      contentCount: 0,
      content: '',
      gender: ["", "男", "女"],
      form: {
        uname: "",
        area: "",
        phone: "",
        birthday: "",
        gender: "",
        nation: "",
        workType: "",
        self: ""
      },
      WorkTypeIndex: 0,
      nationIndex: 0,
      objectIndex: 0,
      isShow: false
    };
  },

  components: {
    cmap
  },
  props: {},
  onLoad: function (options) {},
  onShow: function () {
    var that = this;
    uni.request({
      url: `${app.globalData.baseUrl}/work-type/all`,
      // 目标服务器url
      method: 'GET',
      dataType: 'json',
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        console.log('查询成功', res.data.dataMap.data);
        that.setData({
          workType: res.data.dataMap.data
        });
      }
    });
    uni.request({
      url: `${app.globalData.baseUrl}/mallappletbackstage/nation/getAllNation`,
      // 目标服务器url
      method: 'GET',
      dataType: 'json',
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        console.log('查询成功', res.data.dataMap.data);
        that.setData({
          nation: res.data.dataMap.data
        });
      }
    });
    uni.request({
      url: `${app.globalData.baseUrl}/mallappletbackstage/is-show/select/isShow`,
      // 目标服务器url
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        console.log('是否伪装', res.data.dataMap.data);

        if (res.data.dataMap.data.isShow === 1) {
          this.setData({
            isShow: true
          });
        } else {
          this.setData({
            isShow: false
          });
        }
      }
    });
  },
  methods: {
    cancelLogin: function () {
      uni.navigateBack({
        delta: 1,

        success(res) {
          console.log(`${res}`);
        },

        fail(res) {
          console.log(`navigateBack调用失败`);
        }

      });
    },
    //生日
    bindDateChange: function (e) {
      console.log("picker发送选择改变，携带值为", e.detail.value);
      let form = this.form;
      form.birthday = e.detail.value;
      this.setData({
        form,
        birthday: e.detail.value
      });
    },

    bindNationChange(e) {
      console.log("picker发送选择改变，携带值为", e.detail.value);
      let form = this.form;
      form.nation = e.detail.value;
      this.setData({
        form,
        nationIndex: e.detail.value
      });
    },

    bindWorkTypeChange(e) {
      console.log("picker发送选择改变，携带值为", e.detail.value);
      let form = this.form;
      form.workType = e.detail.value;
      this.setData({
        form,
        WorkTypeIndex: e.detail.value
      });
    },

    bindGenderChange(e) {
      console.log("picker发送选择改变，携带值为", e.detail.value);
      let form = this.form;
      form.gender = e.detail.value;
      this.setData({
        form,
        objectIndex: e.detail.value
      });
    },

    commit(e) {
      var that = this;
      uni.request({
        //url: `https://localhost:10000/user/uInfo/${openid}`,
        url: `${app.globalData.baseUrl}/user/uInfo/${uni.getStorageSync('openid')}`,
        method: "POST",
        data: that.form,
        success: res => {
          uni.navigateTo({
            url: "/pages/ucenter/recruit/recruit",

            success(res1) {
              uni.showToast({
                title: '提交成功',
                icon: 'none',
                duration: 4000
              });
            }

          });
        }
      });
    },

    fail(res) {
      uni.showToast({
        title: '服务器真的错误了！',
        // 内容
        icon: "none"
      });
    },

    name(e) {
      let form = this.form;
      form.uname = e.detail.value;
      this.setData({
        form
      });
    },

    area(e) {
      let form = this.form;
      console.log(e);
      form.area = e.detail.name;
      this.setData({
        form
      });
    },

    phone(e) {
      let form = this.form;
      form.phone = e.detail.value;
      this.setData({
        form
      });
    },

    self(e) {
      let form = this.form;
      form.self = e.detail.value;
      this.setData({
        form
      });
    },

    handleContentInput(e) {
      let form = this.form;
      form.self = e.detail.value;
      this.setData({
        form,
        contentCount: e.detail.value.length //计算已输入的正文字数

      });
    }

  }
};
</script>
<style>
/* pages/company/company.ttss */
.content{
  width: 100%;
  height: 700px;
  background-color: #f2f2f2;
}
.hr{
  padding-top: 40px;
}
.item{
  background: #ffffff;
  width: 96%;
  height: 100rpx;
  line-height: 100rpx;
  margin: 2%;
  padding: 0rpx 20rpx;
}
.item text {
  float: left;
  height: 100rpx;
  width: 25%;
}
.item input{
  float: left;
  height: 100rpx;
  width: 75%;
}
.cell__bd{
  float: left;
  width: 100%;
}
.holder{
  font-size: 14px;
  color: #999999;
}
.flex{
  display: flex;
  flex-direction: row;
}
.flex input{
  width: 300px;
}
item switch{
  margin-top: 5px;
  margin-right: 5px;
}
.mobileInfo{
  display: flex;
  flex-direction: row;
}
.mobile{
  margin: 0 auto;
  border: 1px solid #cccccc;
  height: 40px;
  width: 50%;
  border-radius: 3px;
  background-color: #ffffff;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  margin-left: 5%; 
}
.mobile input{
  margin-top: 8px;
  margin-left: 10px;
}
.code{
  border: 1px solid #cccccc;
  height: 40px;
  width: 35%;
  background-color: #edeeec;
  border-radius: 3px;
  text-align: center;
  margin-left: 10px;
  line-height: 40px;
  color: #999999;
  font-size: 15px;
  margin-bottom: 15px;
  margin-right: 5%; 
}
.btn{
  width: 90%;
  color: #999999;
  margin-top: 40px;
}
.xieyi{
  margin-top: 15px;
  margin-left: 15px;
  font-size: 13px;
}
.agree{
  margin-left: 5px;
  color: #666666; 
}
.opinion{
  color: red;
  font-weight: bold;
  text-decoration: underline;
}
.picker{
  height: 90rpx;
}

</style>